<template>
	<view class="edit-info">
		<view class="create-project-form">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
				<image class="avatar" :src="avatarUrl" mode="aspectFit"></image>
			</button>

			<view class="create-item">
				<text class="info-item-title">真实姓名</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请输入真实姓名" v-model="realNmae">
			</view>

			<view class="create-item">
				<text class="info-item-title">手机号码</text>
				<input class="info-item-input" type="text" maxlength="11" placeholder-class="placeholderFontClass"
					placeholder="请输入手机号码" v-model="phone">
			</view>

			<view class="create-item">
				<text class="info-item-title">所属职位</text>
				<input class="info-item-input" type="text" @click="handleOpenRolePopup"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择职位" v-model="role">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>


		</view>
		<button class="create-btn" @click.stop.prevent="handleEdit">确认修改</button>

		<!-- 职位popup -->
		<van-popup :show="rolePopShow" position="bottom">
			<van-picker show-toolbar :columns="roleNameList" @confirm="onRoleConfirm" @cancel="rolePopShow = false" />
		</van-popup>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				realNmae: '',
				phone: '',
				role: '',
				roleId: '',
				rolePopShow: false,
				roleNameList: [],
				roleIdList: [],
				tokenInfo: {},
				avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/caUgVMmqBGloaE9l0prAUHic1HlofmEM2pGKdnWyDQyDoxCfDvlkrqeiaynF6J5INauR72TENPJRiaWqCaiaBl8vVg/132",
			}
		},

		onShow() {
			const tokenInfo = uni.getStorageSync("tokenInfo");
			if (tokenInfo) {
				this.tokenInfo = tokenInfo;
				this.realNmae = tokenInfo.realName;
				this.phone = tokenInfo.userMobile;
				this.role = tokenInfo.roleNames;
				this.avatarUrl = tokenInfo.avatar;
			}
			this.handleRolePopup();
		},
		methods: {
			// 获取用户头像
			onChooseavatar(e) {
				const {
					avatarUrl
				} = e.detail;
				this.avatarUrl = avatarUrl;
				this.tokenInfo.avatar = avatarUrl;
				uni.setStorageSync("tokenInfo", this.tokenInfo);
				console.log("头像url", this.avatarUrl);
				apiRqs._editAvatar(avatarUrl).then((res) => {
					console.log("头像修改result", res);
					if (res.code == 200 && res.data == true) {
						getApp().showToast("头像修改成功");
					}
				})
			},
			// 获取职位列表
			handleRolePopup() {
				const loginInfo = uni.getStorageSync("loginInfo");
				const tokenInfo = this.tokenInfo;
				var that = this;
				apiRqs._getRoleList(tokenInfo.shopId).then((res) => {
					console.log('职位列表', res);
					let roleNameList = [];
					let roleIdList = [];
					for (let i = 0; i < res.data.length; i++) {
						roleNameList.push(res.data[i].roleName);
						roleIdList.push(res.data[i].id);
						if (tokenInfo.roleNames == res.data[i].roleName) {
							that.roleId = res.data[i].id;
						}
					}
					that.roleNameList = roleNameList;
					that.roleIdList = roleIdList;
				}).catch((err) => {
					console.log('request err', err);
				})

			},
			handleOpenRolePopup() {
				this.rolePopShow = true;
			},
			onRoleConfirm(value) {
				console.log(value);
				this.role = value.detail.value;
				this.roleId = this.roleIdList[value.detail.index];
				this.rolePopShow = false;
			},
			handleEdit() {
				let {
					realNmae,
					phone,
					roleId
				} = this;
				getApp().showLoading();
				var that = this;
				let rqs = {
					"tel": phone,
					"realName": realNmae,
					"roles": [
						roleId + ""
					]
				};
				console.log(rqs);
				apiRqs._editPersonInfo(rqs).then((res) => {
					console.log('修改结果', res);
					uni.hideLoading();
					if (res.code == 200) {
						getApp().showToast("修改成功", "success");
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					} else {
						getApp().showToast(res.msg);
					}
				}).catch((err) => {
					console.log('err', err);
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.edit-info {
		.avatar-wrapper {
			width: 70px;
			height: 70px;
			border-radius: 50%;
			padding: 0;
			margin: 30px auto;

			.avatar {
				width: 70px;
				height: 70px;
				border-radius: 50%;
			}
		}

		.create-project-form {
			margin: 20px;

			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 16px 15px;
				box-sizing: border-box;
				position: relative;

				.right-arrow-icon {
					position: absolute;
					right: 10px;
				}

				&:first-child {
					border-top: 1px solid #f5f5f5;
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}

				&:last-child {
					border-bottom-left-radius: 4px;
					border-bottom-right-radius: 4px;
				}

				.info-item-title {
					width: 80px;
					flex: 0 0 80px;
					font-size: 14px;
				}

				.info-item-input {
					flex: 1;
					font-size: 14px;
					text-align: left;
					color: #666666;
				}

				.placeholderFontClass {
					color: #ddd;
				}
			}


		}

		.create-btn {
			margin: 20px;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&::after {
				border: none;
			}

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>